<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=725, user-scalable=no">
    <title>家庭时光游戏引导师招募</title>
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="../css/framework7-icons.css">
<body>
<style>.play-btn{position: absolute;width: 130px;height: 130px;bottom: 0;left: 302.5px;}.play-btn-down{width: 130px;height: 130px;position: absolute;background: #d94b2b;border-radius: 65px;border: 2px solid #5e1c14;left: 0;top: -40px;}.play-btn-top{width: 135px;height: 130px;position: absolute;background: #fdb993;border-radius: 65px;border: 2px solid #5e1c14;left: -3px;top: -50px;}.item-content{height: 150px;}.size-25{font-size: 25px !important;}.size-35{font-size: 35px !important;}.size-45{font-size: 45px !important;}.sub-btn{height:100px;background: #1dd697;text-align: center;font-size: 35px;line-height: 100px;color: white;}.cut-btn,.qr-wrap{padding:10px 0;}p{font-size: 25px;margin: 5px 0;}h1,h3{font-size: 30px;}.bold{font-weight: bold;}.swiper-slide{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;-ms-flex-direction: column;-webkit-flex-direction: column;-webkit-box-align: center;-webkit-box-lines: single;-moz-box-lines: single;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.flex-column{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;-ms-flex-direction: column;-webkit-flex-direction: column;}.flex-nowrap{-webkit-box-lines: single;-moz-box-lines: single;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}.flex-justify-around{-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-around;justify-content: space-around;}.flex-align-center{-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.flex-align-start{-webkit-box-align: start;-ms-flex-align: start;-webkit-align-items: flex-start;align-items: flex-start;}@keyframes nextbtnAnim{0%{bottom: 20px;}25%{bottom: 30px;}50%{bottom: 40px}75%{bottom: 30px;}100%{bottom: 20px;}}@-moz-keyframes nextbtnAnim{0%{bottom: 20px;}25%{bottom: 30px;}50%{bottom: 40px}75%{bottom: 30px;}100%{bottom: 20px;}}@-webkit-keyframes nextbtnAnim{0%{bottom: 20px;}25%{bottom: 30px;}50%{bottom: 40px}75%{bottom: 30px;}100%{bottom: 20px;}}@-o-keyframes nextbtnAnim{0%{bottom: 20px;}25%{bottom: 30px;}50%{bottom: 40px}75%{bottom: 30px;}100%{bottom: 20px;}}.next-slide-btn{position: absolute;bottom: 20px;left: 337.5px;width: 50px;height: 60px;animation: nextbtnAnim .8s infinite;-moz-animation: nextbtnAnim .8s infinite;-webkit-animation: nextbtnAnim .8s infinite;-o-animation: nextbtnAnim .8s infinite;}.size-45{font-size: 45px !important;}.showinfo-btn{display: none;width: 200px;height: 80px;position: absolute;bottom: 50px;left: 262.5px;background: #fdb993;border: 2px solid #5e1c14;color: #ffffff;text-align: center;line-height: 80px;font-size: 30px;border-radius: 20px;}.hidden{display: none !important;}.music-btn{position: absolute;top: 10px;right: 20px;z-index:99999;}</style>
<div class="content-wrap" id="gamer_present_wrap" style="position: relative;">
    <canvas id="app" width="375" height="627"></canvas>
    <div id="start" style="position: absolute;">
        <div class="play-btn">
            <div class="play-btn-down"></div>
            <div class="play-btn-top"><img src="img/play-btn-text.png" style="width: 80px;margin: 25px;"></div>
        </div>
    </div>
    <div class="showinfo-btn">查看详情</div>
    <div class="music-btn"><img  style="width: 80px;" src=""></div>
    <div class="collection" style="display: none;"><img src="img/1.jpg" name="0" class="item"><img src="img/2.jpg" name="1" class="item"><img src="img/3.jpg" name="2" class="item"><img src="img/4.jpg" name="3" class="item"><img src="img/5.jpg" name="4" class="item"><img src="img/6.jpg" name="5" class="item"></div>
</div>
<audio src="audio/lalala.mp3" id="audio" autoplay preload loop="loop"></audio>
<div class="popup popup-register" style="overflow: scroll;width: 100%;height: 100%;margin: 0;padding: 20px 30px;top: 0;left: 0;background: url('img/register-bg1.jpg') no-repeat;background-position:center;background-size:cover;">
    <div class="swiper-container" style="width: 100%;height: 100%;">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="">
                <h1>Q:到底谁最适合来参加游戏引导师培训？</h1>
                <div class="slide-content flex-column flex-align-center flex-justify-around">
                    <p>想学会用游戏化的方式去解决教育孩子的困扰的你</p>
                    <p>希望孩子学会自我驱动、不断提升学习力的家长</p>
                    <p>需要重新开启一个新的事业成长机会的你</p>
                    <p>有着强烈助人助己意识，爱公益，爱奉献的你</p>
                    <p>家庭时光公益活动游戏引导师等着您的加入！</p>
                    <p style="text-align: center;margin-top: 30px;">
                        <img src="img/7.jpg" style="width: 90%;">
                    </p>
                </div>
            </div>
            <div class="swiper-slide">
                <h1>Q:参加公益游戏引导师培训能收获什么?</h1>
                <div class="slide-content flex-column flex-align-center flex-justify-around">
                    <p>通过一整天的时间为大家系统地传授如何运用游戏力让你的孩子玩出聪明来，玩出亲密的感情关系来，让你跟孩子在哈哈大笑中能力猛涨！</p>
                    <p>我们不仅给你学习技能的机会，还给你实践的机会；不仅给你实践的机会，还给你与沈奕斐教授面对面解决问题的机会！沈教授会亲自对大家在这个过程中出现的问题进行详细的面对面的解答！这几乎是现在唯一可以与沈教授面对面的机会哦！她实在是太忙啦！（嘘！一般人我都不告诉他）</p>
                    <h3>两天的时间，你可以收获一种技能！</h3>
                    <p>一种让你和孩子幸福感爆棚的技能，你会发现你对自己生活的满意度越来越高，也会更多的意识到方向在哪里。</p>
                    <h3>你还可以收获一份新事业！</h3>
                    <p>我们不仅给你学习技能的机会，还给你实践的机会！课程结束后，家庭时光会为大家提供四次实践。我们希望这可以是你新事业的起点，把让孩子幸福快乐作为事业，去帮助更多的家庭。</p>
                </div>
            </div>
            <div class="swiper-slide">
                <h1>Q:有什么福利么？</h1>
                <div class="slide-content flex-column flex-align-start flex-justify-around">
                    <p>1.&nbsp;&nbsp;实践结束后通过考核的游戏引导师，参加家庭时光的各项活动可以根据不同级别获得相应酬劳。初级游戏引导师400元／场，高级游戏引导师600--800元／场</p>
                    <p>2.&nbsp;&nbsp;可以免费得到一套能量逗教具卡牌的全套产品</p>
                    <p>3.&nbsp;&nbsp;享有家庭教育指导师培训的优先报名权</p>
                    <p>4.&nbsp;&nbsp;优先收到沈奕斐教授的线下活动免费门票</p>
                    <p>5.&nbsp;&nbsp;对于收费活动或者收费培训项目有优先购买权和特别抵扣券</p>
                    <p>6.&nbsp;&nbsp;有机会参加游戏引导师年度大咖秀</p>
                    <p>7.&nbsp;&nbsp;可以参与新游戏的内测及试用</p>
                    <p>8.&nbsp;&nbsp;各种惊喜（不定期发布）</p>
                    <p style="margin-top: 30px"><img src="img/8.jpg" style="width: 100%;"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <h1>课程详情</h1>
                <div class="slide-content flex-column flex-align-start flex-justify-around">
                    <p><strong>[内容]</strong>&nbsp;&nbsp;线上+线下共两天时间9个课时</p>
                    <p><strong>[时间]</strong>&nbsp;&nbsp;每季度一期，第一期培训时间4月22日，其他场次加客服入群咨询</p>
                    <p><strong>[地点]</strong>&nbsp;&nbsp;上海市虹口区柳营路35号虹口公益创新园3楼（靠近同心路）</p>
                    <p><strong>[课程费用]</strong></p>
                    <p>材料费:￥800元（包含材料费、餐费、茶水费等）</p>
                    <p>学费:￥1000/人</p>
                    <p><strong>但！！！参训者保证2日全勤，并完成规定实践次数（1次游戏引导师+1次助教+2次志愿者）后，将发放奖学金￥1000</strong></p>
                    <p style="margin-top: 30px;"><img src="img/9.jpg" style="width: 100%;"></p>
                </div>
            </div>
            <div class="swiper-slide">
                <h1>报名流程</h1>
                <div class="slide-content">
                    <p>1.&nbsp;&nbsp;填写下方报名表格，请保证您的信息真实准确</p>
                    <p>2.&nbsp;&nbsp;扫码加客服为好友，客服将您拉入游戏引导师微信群</p>
                    <p>3.&nbsp;&nbsp;微信群中将推送审核结果，通过后付款完成报名</p>
                    <p>注意：本期培训只有20个名额，先到先得哦～</p>
                    <p style="margin-top: 30px;"><img src="img/10.jpg" style="width: 100%;"></p>
                </div>
            </div>
            <div class="swiper-slide" style="-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;">
                <form class="list-block" id="info-form" style="width: 100%;">
                    <ul>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon f7-icons size-45">person</i></div>
                                <div class="item-inner">
                                    <div class="item-title label size-35" style="width: 20%;">姓名</div>
                                    <div class="item-input">
                                        <input type="text" name="userName" class="size-35" style="height: 100px;">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon f7-icons size-45">email</i></div>
                                <div class="item-inner">
                                    <div class="item-title label size-35" style="width: 20%;">邮箱</div>
                                    <div class="item-input">
                                        <input type="email" name="email" class="size-35" style="height: 100px;">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon f7-icons size-45">phone</i></div>
                                <div class="item-inner">
                                    <div class="item-title label size-35" style="width: 20%;">手机</div>
                                    <div class="item-input">
                                        <input type="tel" name="phone" class="size-35" style="height: 100px;">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="sub-btn bold">提交</div>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
    </div>
    <div class="next-slide-btn flex-column flex-align-center flex-justify-around"><i class="f7-icons size-35">triangle_down</i><i class="f7-icons size-45">triangle_down</i></div>
</div>

<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript" src="../js/wx.jssdk.min.1.2.0.js"></script>
<script type="text/javascript">!function(){"use strict";function f(){d++,d>360&&(d=0),a(".music-btn").css("transform","rotate("+d+"deg)"),e=requestAnimationFrame(f)}function g(b){this.canvas=b,this.ctx=this.canvas.getContext("2d"),this.audio=a("#audio")[0],this.imgList=[{link:"img/1.jpg",imgW:"750",imgH:"1206"},{link:"img/2.jpg",imgW:"1562",imgH:"2512",areaW:"138",areaH:"222",areaL:"1313",areaT:"544",limitMax:.1,limitMin:.09},{link:"img/3.jpg",imgW:"1562",imgH:"2512",areaW:"250",areaH:"402",areaL:"1063",areaT:"161",limitMax:.18,limitMin:.16},{link:"img/4.jpg",imgW:"1561",imgH:"2512",areaW:"60",areaH:"96",areaL:"708",areaT:"1868",limitMax:.05,limitMin:.04},{link:"img/5.jpg",imgW:"1562",imgH:"2512",areaW:"196",areaH:"316",areaL:"147",areaT:"160",limitMax:.14,limitMin:.13},{link:"img/6.jpg",imgW:"1562",imgH:"2512",areaW:"296",areaH:"471",areaL:"643",areaT:"1021",limitMax:1,limitMin:0}],this.radio=1,this.index=0,this.fps=40,this.scale=.985,this.scaleSlow=.995}function h(a){var b=document.getElementById(a),c=function(){b.play(),document.removeEventListener("touchstart",c,!1)};b.play(),document.addEventListener("WeixinJSBridgeReady",function(){c()},!1),document.addEventListener("YixinJSBridgeReady",function(){c()},!1),document.addEventListener("touchstart",c,!1)}var c,d,e,i,a=Dom7,b=new Framework7;a.ajax({url:"http://api.nldou.com/weixinapi/init_wx_jsapi",method:"GET",data:{fromUrl:window.location.href},dataType:"json",success:function(a){1==a.code&&wx.config({debug:!1,appId:a.data.appid,timestamp:a.data.timestamp,nonceStr:a.data.nonceStr,signature:a.data.signature,jsApiList:["onMenuShareTimeline","onMenuShareAppMessage"]})}}),wx.ready(function(){wx.onMenuShareTimeline({title:"家庭时光游戏引导师招募",link:"http://wap.nldou.com/gamer/index.html",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareAppMessage({title:"家庭时光游戏引导师招募",desc:"想要加入游戏引导师的队伍么？赶紧来报名吧！",link:"http://wap.nldou.com/gamer/index.html",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",type:"link",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareQQ({title:"家庭时光游戏引导师招募",desc:"想要加入游戏引导师的队伍么？赶紧来报名吧！",link:"http://wap.nldou.com/gamer/index.html",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareWeibo({title:"家庭时光游戏引导师招募",desc:"想要加入游戏引导师的队伍么？赶紧来报名吧！",link:"http://wap.nldou.com/gamer/index.html",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareQZone({title:"家庭时光游戏引导师招募",desc:"想要加入游戏引导师的队伍么？赶紧来报名吧！",link:"http://wap.nldou.com/gamer/index.html",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}})}),document.body.addEventListener("touchmove",function(a){a._isScroller||a.preventDefault()}),c=!1,a(".sub-btn").on("click",function(){var d=b.formToData("#info-form"),e=d.userName.replace(/\s/g,""),f=d.email.replace(/\s/g,""),g=d.phone.replace(/\s/g,""),h=e.length,i=f.length,j=g.length,k="";return 0==h||0==i||0==j?(k='<div style="font-size: 30px;">请完善信息</div>',b.modal({text:k}),setTimeout(function(){b.closeModal(".modal")},2e3),!1):-1==f.indexOf("@")?(k='<div style="font-size: 30px;">请输入正确的邮箱</div>',b.modal({text:k}),setTimeout(function(){b.closeModal(".modal")},2e3),!1):/^1\d{10}$/.test(g)?(c||(c=!0,a.ajax({method:"POST",url:"http://api.nldou.com/gamer/preregister",data:{userName:e,phone:g,email:f},dataType:"json",success:function(d){var e,f;1==d.code?(a("#info-form ul").hide(),e='<div class="qr-wrap flex-column flex-align-center flex-justify-around flex-nowrap" style="width: 100%;"><img src="img/gamer-admin-qrcode.jpg" style="width: 100%;margin-bottom: 20px;"><div style="display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;-ms-flex-direction: row;-webkit-flex-direction: row;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;"><i class="f7-icons size-35" style="color: #1dd697;margin-right: 10px;">check</i><span class="size-25 bold">请扫描二维码入群</span></div></div>',a("#info-form").append(e)):(f='<div style="font-size: 30px;">您已经完成注册,无需重复操作</div>',b.modal({text:f}),setTimeout(function(){b.closeModal(".modal")},2e3)),c=!1},error:function(){var a='<div style="font-size: 30px;">系统繁忙请重试</div>';b.modal({text:a}),setTimeout(function(){b.closeModal(".modal")},2e3),c=!1}})),void 0):(k='<div style="font-size: 30px;">请输入正确的11位手机号</div>',b.modal({text:k}),setTimeout(function(){b.closeModal(".modal")},2e3),!1)}),a(".showinfo-btn").on("click",function(){b.popup(".popup-register");var c=b.swiper(".swiper-container",{direction:"vertical"});c.on("slideChangeStart",function(b){5==b.realIndex?a(".next-slide-btn").addClass("hidden"):a(".next-slide-btn").removeClass("hidden")})}),d=0,e=requestAnimationFrame(f),a(".music-btn").on("click",function(){a(this).hasClass("close")?(a(this).removeClass("close"),a("#audio")[0].play(),e=requestAnimationFrame(f)):(a(this).addClass("close"),a("#audio")[0].pause(),cancelAnimationFrame(e))}),g.prototype.initCanvas=function(){this.w=window.innerWidth,this.h=window.innerHeight,this.w>this.h&&(this.w=725,this.h=1206,a("body").css({width:"725px",height:"1206px",margin:"0 auto",position:"relative",overflow:"hidden"}),a("html").css({width:"100%",height:"100%"})),this.canvas.setAttribute("width",this.w),this.canvas.setAttribute("height",this.h)},g.prototype.showend=function(){a("#start").hide(),a(".showinfo-btn").show()},g.prototype.init=function(){h("audio"),this.initCanvas(),this.domList=a(".collection .item"),this.draw(),this.touchEvent()},g.prototype.draw=function(){if(this.index+1!=this.imgList.length){if(this.radio<this.imgList[this.index+1].areaW/this.imgList[this.index+1].imgW&&(this.index++,this.radio=1,!this.imgList[this.index+1]))return void this.showend();this.imgNext=this.imgList[this.index+1],this.imgCur=this.imgList[this.index],this.img_oversize=this.domList[this.index+1],this.img_minisize=this.domList[this.index],this.drawImgOversize(this.img_oversize,this.imgNext.imgW,this.imgNext.imgH,this.imgNext.areaW,this.imgNext.areaH,this.imgNext.areaL,this.imgNext.areaT,this.radio),this.drawImgMinisize(this.img_minisize,this.imgCur.imgW,this.imgCur.imgH,this.imgNext.imgW,this.imgNext.imgH,this.imgNext.areaW,this.imgNext.areaH,this.imgNext.areaL,this.imgNext.areaT,this.radio)}},g.prototype.touchEvent=function(){var b=this;a("#start").on("touchstart",function(c){function d(){var a=(new Date).getTime();if(b.index+1!=b.imgList.length){if(a-e<1e3/b.fps)return void(b.timer=requestAnimationFrame(d));e=a,b.radio=b.imgList[b.index+1].limitMax&&b.imgList[b.index+1].limitMin&&b.radio<b.imgList[b.index+1].limitMax&&b.radio>b.imgList[b.index+1].limitMin?b.scaleSlow*b.radio:b.scale*b.radio,b.draw(),b.timer=requestAnimationFrame(d)}}c.preventDefault(),a(".play-btn-top").css({top:"-45px"}),cancelAnimationFrame(b.timer);var e=(new Date).getTime();b.timer=requestAnimationFrame(d)}),a("#start").on("touchmove",function(){}),a("#start").on("touchend",function(){a(".play-btn-top").css({top:"-50px"}),cancelAnimationFrame(b.timer)})},g.prototype.drawImgOversize=function(a,b,c,d,e,f,g,h){this.ctx.drawImage(a,f-(d/h-d)*(f/(b-d)),g-(e/h-e)*(g/(c-e)),d/h,e/h,0,0,750,1206)},g.prototype.drawImgMinisize=function(a,b,c,d,e,f,g,h,i,j){this.ctx.drawImage(a,0,0,b,c,750*(f/j-f)*(h/(d-f))*j/f,1206*(g/j-g)*(i/(e-g))*j/g,750*j,1206*j)},i=new g(a("#app")[0]),i.init()}();</script>
</body>
</html>




